<!doctype html>
<!-- The DOCTYPE declaration above will set the     -->
<!-- browser's rendering engine into                -->
<!-- "Standards Mode". Replacing this declaration   -->
<!-- with a "Quirks Mode" doctype is not supported. -->

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--                                                               -->
<!-- Consider inlining CSS to reduce the number of requested files -->
<!--                                                               -->
<link type="text/css" rel="stylesheet" href="/foodiary/css/foodiary/Foodiary.css">
<link type="text/css" rel="stylesheet"
	href="/foodiary/css/foodiary/jquery-ui-1.9.1.custom.min.css">

<!--                                           -->
<!-- Any title is fine                         -->
<!--                                           -->
<title>Web Application Starter Project</title>

<!--                                           -->
<!-- This script loads your compiled module.   -->
<!-- If you add any GWT meta tags, they must   -->
<!-- be added before this line.                -->
<!--                                           -->
<script type="text/javascript" language="javascript"
	src="foodiary/foodiary.nocache.js"></script>
<script type="text/javascript" language="javascript"
	src="foodiary/js/jquery-1.8.2.js"></script>
<script type="text/javascript" language="javascript"
	src="foodiary/js/jquery-ui-1.9.1.custom.min.js"></script>
</head>

<!--                                           -->
<!-- The body can have arbitrary html, or      -->
<!-- you can leave the body empty if you want  -->
<!-- to create a completely dynamic UI.        -->
<!--                                           -->
<body>

	<!-- OPTIONAL: include this if you want history support -->
	<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1'
		style="position: absolute; width: 0; height: 0; border: 0"></iframe>

	<!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
	<noscript>
		<div
			style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
			Your web browser must have JavaScript enabled in order for this
			application to display correctly.</div>
	</noscript>

	<div id="tabs">
		<ul>
			<li><a href="#enterItemsTab">Enter Items</a></li>
			<li><a href="#addCategoryTab">Add Category</a></li>
			<li><a href="#addStoreTab">Add Store</a></li>
			<li><a href="#addItemTab">Add Item</a></li>
		</ul>
		<div id="enterItemsTab">
			<table align="center">
				<tr>
					<td colspan="2" style="font-weight: bold;">Store:</td>
				</tr>
				<tr>
					<td colspan="2" id="storeFieldContainer"><input type="hidden"
						id="storeId" /> <input type="text" id="store" name="store"
						class="gwt-TextBox" />
						<button id="addStore">
							<span class="ui-icon ui-icon-circle-plus"></span>
						</button></td>
				</tr>
				<tr>
					<td colspan="2" style="font-weight: bold;">Date:</td>
				</tr>
				<tr>
					<td colspan="2"><input type="text" id="purchaseDate"
						name="purchaseDate" class="gwt-TextBox" /></td>
				</tr>
				<tr>
					<td colspan="2" style="font-weight: bold;">Item:</td>
				</tr>
				<tr>
					<td colspan="2" id="nameFieldContainer"><input type="hidden"
						id="itemId" /> <input type="text" id="item" name="item"
						class="gwt-TextBox" />
						<button id="addItem">
							<span class="ui-icon ui-icon-circle-plus"></span>
						</button></td>
				</tr>
				<tr>
					<td colspan="2" style="font-weight: bold;">Price:</td>
				</tr>
				<tr>
					<td colspan="2" id="priceFieldContainer"><input type="text"
						id="price" name="price" class="gwt-TextBox" /></td>
				</tr>
				<tr>
					<td id="sendButtonContainer"></td>
				</tr>
				<tr>
					<td colspan="2" style="color: red;" id="errorLabelContainer"></td>
				</tr>
			</table>
		</div>
		<div id="addCategoryTab">
			<fieldset>
				<legend>Add a Category</legend>
				<dl>
					<dd>
						<button id="addCategoryButton">Add Item</button>
						<button class="return">Return</button>
					</dd>
				</dl>
			</fieldset>
		</div>
		<div id="addStoreTab" >
			<fieldset>
				<legend>Add a Store</legend>
				<dl>
					<dt>Store Name :</dt>
					<dd>
						<input type="text" id="modalStoreName" class="gwt-TextBox" />
					</dd>
				</dl>
				<dl>
					<dt>Store Location :</dt>
					<dd>
						<input type="text" id="modalStoreLocation" class="gwt-TextBox" />
					</dd>
				</dl>
				<dl>
					<dd>
						<button id="addCategoryButton">Add Item</button>
						<button class="return">Return</button>
					</dd>
				</dl>
			</fieldset>
		</div>
		<div id="addItemTab" >
			<fieldset>
				<legend>Add an Item</legend>
				<dl>
					<dt>Name:</dt>
					<dd>
						<input type="text" id="modalItemName" />
					</dd>
				</dl>
				<dl>
					<dt>Category:</dt>
					<dd>
						<input type="text" id="modalItemCategory" />
					</dd>
				</dl>
				<dl>
					<dt>Quantity:</dt>
					<dd>
						<input type="text" id="modalQuantity" /><select id="modalQuantityType"></select>
					</dd>
				</dl>
				<dl>
					<dd>
						<button id="addItemButton">Add Item</button>
						<button class="return">Return</button>
					</dd>
				</dl>
			</fieldset>
		</div>
	</div>
</body>
<script>
	$(function() {
		$("#tabs").tabs();
		
		$("#store").autocomplete({
			source : "/foodiaryServer/store/lookup",
			minLength : 2,
			select : function(event, ui) {
				$("#store").val(ui.item.label);
				$("#storeId").val(ui.item.value);
				return false;
			}
		});

		$("#item").autocomplete({
			source : "/foodiaryServer/item/lookup",
			minLength : 2,
			select : function(event, ui) {
				$("#item").val(ui.item.label);
				$("#itemId").val(ui.item.value);
				return false;
			}
		});
		$("#addCategory").button().click( function() {
			$("#tabs").tabs("option", "active", 1);	
		});
		
		$("#addStore").button().click( function() {
			$("#tabs").tabs("option", "active", 2);	
		});
		
		$("#addItem").button().click( function() {
			$("#tabs").tabs("option", "active", 3);	
		});
		
		
		$("#purchaseDate").datepicker();
		
		$("#addItemButton").button().click( function() {
			
		});
		
		$("button.return").button().click( function() {
			$("#tabs").tabs("option", "active", 0);	
		});
		
		$("#addItemButton").bind('click', function() {
			$.getJSON("/foodiaryServer/item/save", {
				category : $("#modalItemCategory").val(),
				name : $("#modalItemName").val(),
				quantity : $("#modalQuantity").val(),
				quantityType : $("#modalQuantity").val()
			}, function(data) {
				$("#storeModal").dialog("close");
			});
		});
		$("#addStore").bind('click', function() {
			$("#storeModal").dialog({
				buttons : {
					Close : function() {
						$(this).dialog("close");
					},
					Save : function() {
						$.getJSON("/foodiaryServer/store/save", {
							location : $("#modalStoreLocation").val(),
							name : $("#modalStoreName").val()
						}, function(data) {
							$("#storeModal").dialog("close");
						});
					}
				}
			});
		});
	});
</script>
</html>
